<template>
  <div style="display: flex;flex-direction: column;width: 100%">
    <Header :activeName="activeName"></Header>
    <div style="display: flex;margin-top: 90px;height: 30px;line-height: 30px;justify-content: center;">
      <el-breadcrumb :separator-icon="ArrowRight" style="height: 30px;width: 80%;align-items: center;line-height: 30px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>教练团队</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="main">
      <div class="course-container">
        <a :class="[item.id ? 'course' : 'course empty-c']" v-for="item in coachList" style="color: #000000" :href="'/coach/detail?cid='+item.id">
          <div class="course-content">
            <img v-show="item.id" alt="item" :src="item.pic ? item.pic : noPic">
          </div>
          <div style="height: 50px">
            <p class="course-category overflow-wrap-ellipsis">{{item.realName}}</p>
            <p style="height: 20px;" class="overflow-wrap-ellipsis">{{ item.domain }}</p>
          </div>
        </a>
      </div>
      <div style="margin: 20px auto;display: flex;justify-content: center;">
        <el-pagination background
                       v-model:current-page="params.pageNum"
                       v-model:page-size="params.pageSize"
                       layout='total, prev, pager, next'
                       :total='params.total'
                       class='mt-4'
                       style='float: right'
                       @change='pages'/>
      </div>
    </main>
    <Footer></Footer>
  </div>

</template>

<script setup lang="ts">
import Header from '@/components/header/Header.vue'
import Footer from '@/components/header/Footer.vue'
import Breadcrumb from '@/components/Breadcumb.vue'

// import LatestGoods from '@/components/indexDecorate/decorateList/LatestGoods.vue'

import {onMounted, reactive, ref} from 'vue'
import {useRouter} from "vue-router";
import {ArrowRight} from "@element-plus/icons-vue";
import {coachPage} from "@/api/coach.ts";
import noPic from '@/assets/zanwu.jpg'

const router = useRouter()
const activeName = router.currentRoute.value.path
const coachList = ref([])
const params = reactive({
  // 请求参数
  pageNum: 1,
  pageSize: 12,
  total: undefined,
})
const pages = () => {
  coachPage(params).then((resp)=>{
    coachList.value = resp.data.records
    params.total = resp.data.total
    if(coachList.value.length < 6){
      for(let i=coachList.value.length;i<12;i++){
        coachList.value.push({
          id: null
        })
      }
    }else if(coachList.value.length > 6 && coachList.value.length < 12){
      for(let i=coachList.value.length;i<12;i++){
        coachList.value.push({
          id: null
        })
      }
    }
  })
}

onMounted(()=>{
  pages()
})

</script>
<style scoped>
.main {
  width: 80%;
  position: relative;
  top: 20px;
  margin: auto;
  box-sizing: border-box;
  padding: 2px;
  border-top: 1px solid #4a4949;
  background-color: #fbf8f8;
}
.course-container {
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
}
.course{
  width: 230px;
  height: 350px;
  margin-top: 10px;
}
.course-content {
  height: 230px;
}
.course-content img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.course-category {
  height: 30px;
  font-weight: bold;
  font-size: 20px;
  line-height: 30px;
}
.overflow-wrap-ellipsis {
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.empty-c:hover {
  cursor: default !important;
  transform: scale(1) !important;
  background-color: #fbf8f8 !important;
}
</style>
